<template>
	<div class="pay_detail">
		<div v-if="isPay == '00'">
			<div class="part mb0">
				<h2>本年您累计减分(分)</h2>
				<!-- <p class="down"><i class="ion ion-arrow-down-c"></i>68</p> -->
				<div ref="payChart" style="width:100%;height:30rem"></div>
			</div>
			<div v-if="payList.length>0 && payDetailList.length <=0 ">
				<h3 class="plrEmpty ft15 line_height200">{{payType}}</h3>
				<ul class="items">
					<li :class="['has_right_attach',{'has_right_arrow':list.time>0}]" v-for="list of payList" @click="list.time>0 && displayDetail(list.score,list.type,list.status,list.name)">
						<span class="content">{{list.name}}</span>
						<span class="attach">{{list.time}}</span>
					</li>
				</ul>
			</div>
			<div v-if ="payDetailList.length>0" >
				<h3 class="plrEmpty ft15 line_height200">{{detailType}}<span class="ion ion-reply right ion_color_gray" @click="payDetailList = []"></span></h3>
				<ul class="items">
					<li class="has_right_attach" v-for="list of payDetailList" @click='getDetailShow(list)'><span class="content">{{list.content}}</span><span class="attach">{{list.happenDate}}</span></li>
				</ul>
			</div>
			<detail-show v-if="isShowPop" :showInfo="showInfoCon" @close-show="hideShow"></detail-show>
		</div>
		<div v-show="isPay == '01'">
			<nav class="tab_nav mt10">
				<ul>
					<li @click="tabSwitch(menu,index)" v-for="(menu,index) of menuList" :class="{cur:menu.isCur}">{{menu.name}}</li>
				</ul>
			</nav>
			<over-time v-show="isShowOverTime"></over-time>
			<over-speed v-show="isShowOverSpeed"></over-speed>
			<night v-show="isShowNight"></night>
			<rapid v-show="isShowRapid"></rapid>
		</div>
	</div>
</template>
<script type="text/javascript">
	import getInterface from '../../assets/js/insterface'
	import echarts from 'echarts'
	import echartsOptions from '../../assets/js/performace/echartOption'
	import PayInterfaceUrl from '../../assets/js/performace/url'

	import OverTime from './overTimeChart'
	import OverSpeed from './overSpeedChart'
	import night from './nightChart'
	import Rapid from './rapidChart'
	import DetailShow from './toastShow'

	export default{
		components:{
			OverTime,OverSpeed,night,Rapid,DetailShow
		},
		data(){
			return{
				isPay:this.$route.query.isPay,
				'payList0':[
					{'content':"qqqww",show:false},
					{'content':"2222",show:false}
				],
				'payList':[],
				'payType':'',
				'detailType':'',
				'payDetailList':[],
				'menuList':[
					{'name':"超时",'isCur':true},
					{'name':"超速",'isCur':false},
					{'name':"夜驾",'isCur':false},
					{'name':"急加减速",'isCur':false},
				],
				'isShowOverTime':true,
				'isShowOverSpeed':false,
				'isShowNight':false,
				'isShowRapid':false,
				'isShowPop':false,
				'showInfoCon':''
			}
		},
		mixins: [echartsOptions,PayInterfaceUrl],
		mounted(){
			// document.title="年支出";
			this.$el.parentElement.parentNode.style.background = '#fafafa';
			this.getDeductChartByPersonalData();
			console.log(this.isPay)
		},
		methods:{
			displayDetail(score, type,status,name){
				var empNo = this.$route.query.empNo;
				var detailUrl = getInterface.getDeductDetail + empNo+'/'+score+'/'+type+'/'+status
				this.$http.get(detailUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response.data.length>0){
						this.payDetailList = response.data;
						this.detailType = name;						
					}
				})
			},
			getDeductChartByPersonalData(){
				let vue = this;
				let payChart = echarts.init(this.$refs.payChart);
				this.$http.get(this.deductChartByPersonalUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response){
						this.payOption.yAxis.data = response.data[0].type;
						this.payOption.series[0].data = response.data[0].data[0];
						console.log(this.payOption.series[0].data);
						debugger
						payChart.setOption(this.payOption);

						payChart.on("click",function(params){
							 console.log(params);
							switch(params.name){
								case "严重违规":
									vue.getpayListData(20,params.name);
									break;
								case "较严重违规":
									vue.getpayListData(10,params.name);
									break;
								case "一般违规":
									vue.getpayListData(5,params.name);
									break;
								case "轻微违规":
									vue.getpayListData(3,params.name);
									break;
								case "违停/任务未完成":
									vue.getpayListData(1,params.name);
									break;
								default:
									vue.payList = [];
							}
						})
					}
				})
			},
			tabSwitch(menu,index){
				for(let menuLi of this.menuList){
					menuLi.isCur = false;
				}
				menu.isCur = true;

				let vue = this;

				switch(index){
					case 0:
						this.isShowOverTime = true;
						this.isShowOverSpeed = false;
						this.isShowNight = false;
						this.isShowRapid = false;
						setTimeout(()=>{
							vue.$children[0].getOverTimeCountryData();
							vue.$children[0].getOverTimePersonalData();
						},10)
						break;
					case 1:
						this.isShowOverTime = false;
						this.isShowOverSpeed = true;
						this.isShowNight = false;
						this.isShowRapid = false;
						setTimeout(()=>{
							vue.$children[1].getSpeedingCountryData();
							vue.$children[1].getSpeedingPersonalData();
						},10)
						break;
					case 2:
						this.isShowOverTime = false;
						this.isShowOverSpeed = false;
						this.isShowNight = true;
						this.isShowRapid = false;
						setTimeout(()=>{
							vue.$children[2].getNightCountryData();
							vue.$children[2].getNightPersonalData();
						},10)
						break;
					case 3:
						this.isShowOverTime = false;
						this.isShowOverSpeed = false;
						this.isShowNight = false;
						this.isShowRapid = true;
						setTimeout(()=>{
							vue.$children[3].getRapidCountryData();
							vue.$children[3].getRapidPersonalData();
						},10)
						break;
				}
			},
			getpayListData(score,title){
				this.payList = [];
				this.payDetailList = [];
				var empNo = this.$route.query.empNo
				let deductDetailByPersonalUrl = getInterface.getDeductGroup +empNo +'/'+score;
				// let params = {
				// 	'empNo':this.$route.query.empNo,
				// 	'score':score
				// }
				this.$http.get(deductDetailByPersonalUrl,{emulateJSON:true})
				.then((response)=>{
					console.log(response);
					this.payList = response.data;
					this.payType = title;
				})
			},
			getDetailShow(list){
				this.showInfoCon = list.content;
				this.isShowPop = true;
			},
			hideShow(){
				this.isShowPop = false;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.pay_detail{
		.right{
			float:right;
		}
		.ion_color_gray{
			color:#23a551;
			font-size:25px;
		}
	}
</style>